<template>
  <div>
    <!-- s 轮播区-->
    <div id="index-swiper" class="swiper h-[510px]">
    <div class="swiper-wrapper">
      <div class="swiper-slide relative flex-center  bg-[url('~/assets/images/banner_06.png')] bg-cover bg-no-repeat">
        <div class="w-full h-full" @click="$router.push('/news/96')"></div>
      </div>
      <div class="swiper-slide">
        <div class="banner flex-center">
          <div class="px-[15%] xl:px-0 w-[1200px]">
            <div class="banner_text">
              <h1 class="banner_title_main">智慧工地政府监管平台服务商</h1>
              <h3 class="banner_title_less">
                全生命周期可视化监管，安全管理有保障
              </h3>
              <div class="banner_tag">
                助力数字建造、智慧建造、安全建造、绿色建造
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <img class="w-full h-full object-cover" src="../assets/images/banner_03.png" />
      </div>
      <div class="swiper-slide">
        <img class="w-full h-full object-cover" src="../assets/images/banner_02.png" />
      </div>
       <!-- <div class="swiper-slide relative flex-center  bg-[url('~/assets/images/banner_05.png')] bg-cover bg-no-repeat">
        <div class="w-full h-full" @click="$router.push('/solution/homescreen')"></div>
      </div> -->
      <div class="swiper-slide relative flex-center  bg-[url('~/assets/images/banner_04.png')] bg-cover bg-no-repeat">
        <div class="w-full h-full" @click="$router.push('/product/znd')"></div>
      </div>
      <!-- <div class="swiper-slide relative flex-center  bg-[url('~/assets/images/banner_04.png')] bg-cover bg-no-repeat">
        <div class="w-full px-[15%] " @click="$router.push('/product/znd')">
          <h2 class="banner-main-title whitespace-nowrap bg-gradient-to-b from-white via-white to-[#3af4b4] text-fill-color bg-clip-text">筑能达·建筑工地能耗监测管理平台</h2>
          <div class="mt-5 w-fit text-sm md:text-2xl lg:text-[30px] py-3 px-5 text-white bg-gradient-to-l from-transparent to-[#3af4b4]/70">科技助力绿色建造，响应“双碳”战略发展</div>
          <div class="mt-5 w-fit text-xs md:text-sm text-[#3af4b4] border border-[#3af4b4] py-1 px-2 rounded-3xl bg-[#3af4b4]/30">点击了解详情</div>
        </div>
      </div> -->
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- e 轮播区-->
  <div class="total-box">
    <div v-for="(item, ind) in totalList" :key="ind" class="total-item">
      <img class="total-icon" :src="item.icon" />
      <div class="total-info">
        <div class="total-value">{{ item.count }}<span>+</span></div>
        <label class="total-name">{{ item.name }}</label>
      </div>
    </div>
  </div>

  <div class="company-info">
    <div class="company-intro">
      <card-title less-title="Company introduction" title="公司介绍"></card-title>
      <div class="w-[96%] xl:w-[1200px] mx-auto flex flex-wrap mt-8">
        <div class="w-full lg:w-[46%] relative" @click="handlePlay">
          <img alt="智慧工地官网，智慧工地监管" class="h-auto" src="~/assets/images/company_video.png" />
          <img class="absolute top-[60%] left-1/2 -translate-x-1/2 w-10 h-10" src="../assets/images/video_play.png" />
        </div>
        <div class="company-text w-full lg:w-[51%] lg:pl-[35px]">
          <p class="text-left">
            湖南联合智为信息技术有限公司，是行业创新的集平台、软件、硬件于一体的智慧住建综合解决方案提供商。公司基于丰富的智能终端硬件设备，利用AIoT、大数据、物联网、云计算等行业领先技术，自主研发了智慧工地云监管平台、智慧工地小程序，为监管部门、建筑企业、工程项目提供覆盖全生命周期的一站式智慧工地监管解决方案，帮助政府及企业精细解决项目安全施工难点，提升工程建设管理效率，打造智慧住建“样板观摩”工程。实现劳务用工智能化、工程施工数据化、项目信息可视化、现场流程精细化，助力数字建造、智慧建造、安全建造、绿色建造。
          </p>
          <p class="mt-4 text-left">
            公司现已与全国多地住建部门展开了广泛合作，在湖南、陕西、江西、海南等地积极部署智慧工地云监管平台。拥抱建筑业数字化转型升级大变革，以创新科技为引领，致力于成为住建信息化领域的先行者、引领者、推动者，助力建筑业高质量发展。
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="digit-box">
    <div class="digit-box-con w-[96%] xl:w-[1200px]">
      <div class="digit-left w-full lg:w-[51%] lg:pr-[107px]">
        <div class="digit-title-less">Digital transformation</div>
        <h2 class="card-title-main mt-4">中国建筑业数字化转型</h2>
        <div class="card-title-bar mt-10"></div>
        <p>
          建筑业，是我国国民经济的重要支柱产业，在推动经济社会发展过程中持续发挥重要作用。与此同时，中国建筑业一直面临着安全事故多发、监管难度大、管理粗放等诸多问题，传统粗放型发展模式难以为继。在产业数字化背景下，集成BIM、云计算、大数据、物联网、区块链、AR/VR等新技术，形成智能建造产业体系渐成行业共识，建筑业数字化转型浪潮袭来，智慧工地随之应运而生。
        </p>
      </div>
      <div class="w-full lg:w-[47%]">
        <img class="w-full h-auto" alt="智慧工地官网，智慧工地监管" src="~/assets/images/digit_cover.png" />
      </div>
    </div>
  </div>

  <div class="product-box">
    <card-title less-title="Product matrix" title="联合智为 产品矩阵" :less-style="{
          background: 'linear-gradient(360deg, #ffffff 0%, #dbefff 100%)',
        }"></card-title>
    <div class="product-list mt-[87px]">
      <div v-for="(product, ind) in productList" :key="ind" class="product-item">
        <img :alt="product.name" class="product-icon" :src="product.icon" />
        <label class="product-name">{{ product.name }}</label>
        <p class="product-desc">{{ product.desc }}</p>
        <nuxt-link :to="product.path" class="product-btn">点击查看</nuxt-link>
      </div>
    </div>
  </div>

  <div class="news-box">
    <card-title less-title="Provide you with excellent service" title="实力护航，为您提供优质卓越的服务！"></card-title>
    <div class="news-list">
      <div class="news-item w-full pt-[32px] pb-[38px] px-[34px]">
        <img alt="智慧工地官网" class="object-cover w-full lg:w-[291px] h-[207px] mr-[23px]" src="../assets/images/news_01.png" />
        <div class="news-info !leading-9">
          <h2 class="news-title">智慧工地行业权威标准编制单位</h2>
          <p class="news-desc">
            参与多项行业标准编制，助力智慧工地行业标准化建设！
          </p>
          <p class="news-desc">
            ·《湖南省建筑工程施工现场监管信息系统技术标准》主编单位；
          </p>
          <p class="news-desc">
            · 中国工程建设标准化协会《智慧工地管理标准》参编单位；
          </p>
          <p class="news-desc">
            ·
            中国信息协会《智慧工地总体规范》《智慧工地建设规范》《智慧工地应用规范》3项团体标准参编单位；
          </p>
          <p class="news-desc">
            · 协助湖南省住建厅完成编制《智慧工地政府监管信息系统建设指南》
          </p>
        </div>
      </div>
      <div class="flex flex-col md:flex-row">
        <div class="news-item p-5 w-full lg:w-1/2">
          <img alt="智慧工地官网" class="news-cover" src="../assets/images/news_02.png" />
          <div class="news-info leading-[34px]">
            <h2 class="news-title">湖南省劳务实名制平台技术支持单位</h2>
            <p class="news-desc">
              作为湖南省建筑工人实名制管理平台技术支持单位，为湖南省有效落实劳务实名制管理贡献技术力量，2019年完成平台部署建设。
            </p>
          </div>
        </div>
        <div class="news-item md:ml-5 p-5 w-full lg:w-1/2">
          <img alt="智慧工地官网" class="news-cover" src="../assets/images/news_03.png" />
          <div class="news-info leading-[34px]">
            <h2 class="news-title">国家高新技术企业，技术驱动创新</h2>
            <p class="news-desc">
              公司系国家高新技术企业、双软认证企业，坐落于科创企业云集的长沙高新区，荣获“2021年湖南互联网企业50强”称号。以技术为引擎，推动建筑业数字化转型升级！
            </p>
          </div>
        </div>
      </div>
      <div class="flex flex-col md:flex-row">
        <div class="news-item p-5 flex-1">
          <img alt="智慧工地官网" class="news-cover" src="../assets/images/news_04.png" />
          <div class="news-info">
            <h2 class="news-title">产品自研，多项专利技术领跑行业</h2>
            <p class="news-desc">产品技术创新，研发实力雄厚：</p>
            <p class="news-desc">
              ·拥有13+发明专利和实用新型专利、30+计算机软件著作权；
            </p>
            <p class="news-desc">
              ·荣获“华为鲲鹏技术认证”、“CMMI3软件能力成熟度认证”、ISO
              9001质量管理体系认证、ISO 14001环境管理体系认证、ISO
              45001职业健康安全管理体系认证等。
            </p>
          </div>
        </div>
        <div class="news-item md:ml-5 p-5 flex-1">
          <img alt="智慧工地官网" class="news-cover" src="../assets/images/news_05.png" />
          <div class="news-info">
            <h2 class="news-title">售后无忧，五星级专业优质服务</h2>
            <p class="news-desc leading-9">
              专业技术服务团队保驾护航，提供软、硬件一体化技术支持服务，实时在线答疑、专业运维人员技术指导，省时、省心、省力，解决您的后顾之忧。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="service-box bg-[#FBFBFB]">
    <card-title less-title="Serving customers" title="服务客户" :less-style="{
          background: 'linear-gradient(360deg, #ffffff 0%, #dbefff 100%)',
        }"></card-title>
    <div class="module-con">
      <div class="service-tabs space-x-5 md:space-x-10">
        <div class="service-tab" :class="{ 'service-tab-active': serviceCurrent === 0 }" @click="serviceCurrent = 0">
          服务政府部门（部分）
        </div>
        <div class="service-tab" :class="{ 'service-tab-active': serviceCurrent === 1 }" @click="serviceCurrent = 1">
          合作建设单位（部分）
        </div>
        <div class="service-tab" :class="{ 'service-tab-active': serviceCurrent === 2 }" @click="serviceCurrent = 2">
          合作银行（部分）
        </div>
      </div>
      <div class="mt-10">
        <div v-if="serviceCurrent === 0" class="w-full">
          <img class="w-full" src="../assets/images/service_01.png" />
        </div>
        <div v-else-if="serviceCurrent === 1" class="w-full">
          <img class="w-full" src="../assets/images/service_02.png" />
        </div>
        <div v-else-if="serviceCurrent === 2" class="w-full">
          <img class="w-full" src="../assets/images/service_03.png" />
        </div>
      </div>
    </div>
  </div>

  <div class="pt-18 pb-20">
    <card-title less-title="Company news" less-class="!bg-gradient-to-t from-[#FFF] to-[#DBEFFF] " title="公司新闻"></card-title>
    <div class="module-con flex flex-col md:flex-row mt-10">
      <div class="flex-1 md:w-0 h-full mb-5">
        <cu-swiper loop pagination autoplay swiper-id="news-swiper">
          <cu-swiper-item v-for="(item, index) in topData" :key="index" class="h-full">
            <nuxt-link class=" grid " :to="`/news/${item.articleId}`">
              <img class="w-full h-[38vh]" :src="item.titleImg" />
              <p class="p-5 w-full -mt-16 backdrop-blur bg-white/30 text-white text-ellipsis overflow-hidden whitespace-nowrap">
                {{ item.title }}
              </p>
            </nuxt-link>
          </cu-swiper-item>
        </cu-swiper>
      </div>
      <div class="flex-1 md:ml-6">
        <div v-for="(item, index) in newsList.slice(0,6)" :key="index" class="mb-5 flex items-start" :class="{ 'bg-[#F6FAFF] p-4': newsIndex === index }" @mouseenter="newsIndex = index">
          <p class="h-6 w-6 bg-[#ECECEC] text-[#666] flex-center" :class="{ 'bg-[#2184FE] text-white': newsIndex === index }">
            {{ index + 1 }}
          </p>
          <nuxt-link :to="`/news/${item.articleId}`" class="ml-4 flex-1 w-0">
            <template v-if="newsIndex === index">
              <p class="text-sm md:text-lg text-[#2184FE] mb-1">
                {{ item.title }}
              </p>
              <p class="!text-sm text-[#666666]">{{ item.about }}</p>
            </template>
            <p v-else class="text-sm text-ellipsis overflow-hidden whitespace-nowrap md:text-lg text-[#666666]">
              {{ item.title }}
            </p>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>

  <div :class="{ '!block': videoShow }" class="video-mask z-[9999] fixed top-0 left-0 w-screen h-screen overflow-hidden hidden bg-black/10" @click="handleUnPlay">
    <div class="video-content absolute w-2/3 h-2/3 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
      <video ref="company-video" controls class="absolute top-0 left-00 w-full h-full hidden" :class="{ '!block': videoShow }" @click.stop="videoShow = true">
        <source src="https://qile-img.oss-cn-shenzhen.aliyuncs.com/bim/123/company.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
import CardTitle from '../components/CardTitle.vue'
import CuSwiper from '../components/CuSwiper.vue'
import CuSwiperItem from '../components/CuSwiperItem.vue'
export default {
  name: 'IndexPage',
  components: {
    CardTitle,
    CuSwiper,
    CuSwiperItem,
  },
  async asyncData() {
    const { data } = await axios({
      url: 'https://erp.hnlhzw.cn/official/article/api/queryPreviewList',
      method: 'post',
      params: { pageNum: 1, pageSize: 20, type: 1, sort: 'COM' },
    }).catch((err) => {
      console.error(err)
    })
    const topData = await axios({
      url: 'https://erp.hnlhzw.cn/official/article/api/important',
      method: 'get',
    }).catch((err) => {
      console.error(err)
    })
    return { topData: topData.data.data, newsList: data.rows }
  },
  data() {
    return {
      value: '',
      totalList: [
        {
          name: '服务项目',
          count: 8000,
          icon: require('../assets/images/total_01.png'),
        },
        {
          name: '服务政企单位',
          count: 2000,
          icon: require('../assets/images/total_02.png'),
        },
        {
          name: '接入设备',
          count: 257808,
          icon: require('../assets/images/total_03.png'),
        },
        {
          name: '监管数据',
          count: '561亿',
          icon: require('../assets/images/total_04.png'),
        },
      ],
      productList: [
        {
          name: '联筑达',
          desc: '智慧工地政府监管平台',
          icon: require('../assets/images/product_lzd.png'),
          path: '/product/lzd_government',
        },
        {
          name: '筑训宝',
          desc: '劳务学习平台',
          icon: require('../assets/images/product_zxb.png'),
          path: '/product/zxb',
        },
        {
          name: '建巡宝',
          desc: '政务巡检/移动执法平台',
          icon: require('../assets/images/product_jxb.png'),
          path: '/product/jxb',
        },
        {
          name: '筑能达',
          desc: '建筑工地能耗监测管理平台',
          icon: require('../assets/images/product_znd.png'),
          path: '/product/znd',
        },
      ],
      serviceCurrent: 0,
      videoShow: false,
      newsIndex: 0,
    }
  },
  head: {
    title: '智慧工地监管云平台_智慧工地监控系统，住建信息化监管-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '智慧工地，智慧工地监管平台，智慧工地监管系统，住建信息化监管',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联合智为是集平台、软件、硬件于一体的智慧住建综合解决方案提供商。基于大数据、物联网、云计算等技术和智能设备，为住建部门、开发商、建筑商提供一站式智慧工地监管解决方案，助力智慧建造、数字建造、安全建造、綠色建造。',
      },
      {
        name: 'baidu-site-verification',
        content: 'code-mUARIuaBev',
      },
      {
        name: 'sogou_site_verification',
        content: '7ToaDODCF7',
      },
      {
        name: 'bytedance-verification-code',
        content: 'YKPJkjo2Zxk+i9trlnJ7',
      },
    ],
  },
  mounted() {
    const swiper = new window.Swiper('#index-swiper', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
      autoplay: true,
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
    console.log('swiper初始化完成', swiper)
  },
  methods: {
    handlePlay() {
      this.videoShow = true
      this.$refs['company-video'].play()
    },
    handleUnPlay() {
      this.videoShow = false
      this.$refs['company-video'].pause()
    },
  },
}
</script>
<style scoped>
.banner {
  background: url('~/assets/images/banner_01.png');
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
  @apply relative w-full h-[510px] bg-cover;
}

.banner_title_main {
  white-space: nowrap;
  font-weight: 800;
  color: #ffbc00;
  line-height: 72px;
  background: linear-gradient(180deg, #ffffff 0%, #ffa100 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  @apply text-xl sm:text-2xl md:text-4xl lg:text-5xl xl:text-6xl;
}

.banner_title_less {
  font-weight: 500;
  color: #ffffff;
  line-height: 50px;
  white-space: nowrap;
  @apply text-base mt-3 md:text-xl md:mt-6 lg:text-3xl lg:mt-9 xl:text-4xl;
}

.banner_tag {
  border-radius: 26px;
  opacity: 0.79;
  border: 1px solid #ffffff;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  @apply px-3 py-1 text-xs mt-6 w-fit lg:text-lg lg:px-6 lg:py-3 xl:text-xl;
}

.total-box {
  background: #ffffff;
  box-shadow: 0px 5px 16px 0px #e9ecee;
  border-radius: 2px;
  margin: 0 auto;
  z-index: 1;
  @apply flex flex-wrap px-[5%] py-3 md:py-[50px] w-[96%] xl:w-[75rem] absolute top-[510px] left-1/2 -translate-x-1/2;
}

.total-item {
  display: flex;
  align-items: center;
  @apply w-1/2 sm:w-1/4 sm:justify-center;
}

.total-icon {
  @apply w-10 h-10 mr-2 md:w-[50px] md:h-[50px] md:mr-4;
}

.total-value {
  white-space: nowrap;
  font-weight: 800;
  color: #222222;
  display: flex;
  align-items: flex-start;
  @apply md:text-[28px];
}

.total-value span {
  margin-left: 5px;
  font-size: 20px;
  font-weight: 600;
  color: #1393ff;
}

.total-name {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
}

.company-info {
  padding: 154px 0 101px;
  text-align: center;
}

.card-title-less {
  font-size: 60px;
  font-weight: 500;
  color: #9d9d9d;
  line-height: 82px;
  background: linear-gradient(360deg, #fbfbfb 0%, #efefef 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.company-text {
  font-size: 16px;
  font-weight: 400;
  color: #676c70;
}

.company-text p {
  line-height: 34px;
}

.digit-box {
  background: #fbfbfb;
}

.digit-box-con {
  margin: 0 auto;
  padding: 90px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.digit-left p {
  margin-top: 37px;
  font-size: 16px;
  font-weight: 400;
  color: #676c70;
  line-height: 36px;
}

.digit-title-less {
  font-size: 20px;
  font-weight: 500;
  color: #9d9d9d;
  text-transform: uppercase;
}

.product-box {
  padding: 81px 0 90px;
  text-align: center;
  background: url(~/assets/images/banner_home_product.png) center no-repeat;
  background-size: cover;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  @apply w-[96%] xl:w-[1200px] mx-auto;
}

.product-item {
  width: 285px;
  height: 313px;
  margin: 0 15px 25px 0;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid #edf4fb;
  border-top: 2px solid #0099ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.product-icon {
  width: 84px;
  height: 84px;
}

.product-name {
  width: 55px;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 25px;
  margin-top: 17px;
}

.product-desc {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #828282;
}

.product-btn {
  margin-top: 12px;
  padding: 10px 28px 9px;
  border-radius: 20px;
  border: 1px solid #54adff;
  font-size: 14px;
  font-weight: 400;
  color: #0085ff;
}

.news-box {
  padding: 75px 0 90px;
  text-align: center;
  background: url(~/assets/images/banner_home_news.png) center no-repeat;
  background-size: cover;
}

.news-title-less {
  font-size: 60px;
  font-weight: 500;
  color: #9d9d9d;
  background: linear-gradient(360deg, #fbfbfb 0%, #efefef 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.news-list {
  margin: 52px auto 0;
  display: flex;
  flex-wrap: wrap;
  @apply w-[96%] xl:w-[1200px];
}

.news-item {
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  @apply mb-5 flex-col lg:flex-row;
}

.news-cover {
  @apply object-cover w-full lg:w-[139px] h-[177px] mr-4;
}

.news-info {
  text-align: left;
  @apply flex-1;
}

.news-title {
  font-size: 24px;
  font-weight: 600;
  color: #222222;
}

.news-desc {
  font-size: 16px;
  font-weight: 400;
  color: #676c70;
  text-align: left;
}

.service-box {
  padding: 75px 0 55px;
  text-align: center;
}

.service-tabs {
  @apply flex items-baseline mt-10 overflow-auto;
}

.service-tab {
  font-size: 20px;
  font-weight: 400;
  color: #222222;
  @apply whitespace-nowrap text-base md:text-xl;
}

.service-tab-active {
  font-weight: 600;
  color: #222222;
  @apply text-lg md:text-2xl;
}

.service-list {
  margin: 40px auto 0;
  @apply w-[96%] xl:w-[1200px] justify-around;
  display: flex;
  flex-wrap: wrap;
}

.service-item {
  width: 280px;
  height: 54px;
  background: #ffffff;
  border: 1px solid #dddddd;
  display: flex;
  align-items: center;
  padding: 0 15px;
  margin: 0 0 25px;
}

.service-icon {
  width: 33px;
  height: 37px;
}

.service-name {
  margin-left: 11px;
  font-size: 16px;
  font-weight: 500;
  color: #0067a8;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
  @apply text-white h-8 w-8 md:h-16 md:w-16;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  @apply text-sm md:text-2xl;
}
</style>
